// In App.js in a new project

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
// import { MyTabs } from './src/components/MyTabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import WelcomeSreen from './src/pages/WelcomeSreen/WelcomeSreen';
import IndexSreen from './src/pages/IndexSreen/IndexSreen';
import DetailseSreen from './src/pages/DetailsSreen/DetailseSreen';
import { Image, StyleSheet, TouchableOpacity } from 'react-native';
import CartSreen from './src/pages/CartSreen/CartSreen';
import CourseListSreen from './src/pages/CourseListSreen/CourseListSreen';
import { ToastProvider } from './src/components/MyToast/ToastProvider'; // 确保路径正确
import CourseVideoPlaySreen from './src/pages/DetailsSreen/CourseVideoPlaySreen/CourseVideoPlaySreen';
import PayScreen from './src/pages/PayScreen/PayScreen';

export default function App() {
  const Stack = createNativeStackNavigator();

  const DetailsHeaderRight = React.useCallback(
    ({ navigation }: { navigation: any }) => (
      <TouchableOpacity
        onPress={() => {
          // 点击购物车图片跳转到购物车页面
          navigation.navigate('Cart');
        }}
        style={{ padding: 8 }}
      >
        <Image
          style={styles.shopLogo}
          source={require('./src/static/my/gouwuce.png')}
        />
      </TouchableOpacity>
    ),
    [],
  );

  // 为了让headerRight组件能访问到navigation对象，需要使用屏幕选项的函数形式

  return (
    <ToastProvider>
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="Welcome"
          screenOptions={{ headerShown: false }}
        >
          <Stack.Screen name="Welcome" component={WelcomeSreen} />
          <Stack.Screen name="Index" component={IndexSreen} />
          <Stack.Screen
            name="Details"
            options={({ navigation }) => ({
              headerShown: true,
              title: '',
              headerRight: () => DetailsHeaderRight({ navigation }),
            })}
            component={DetailseSreen}
          />
          <Stack.Screen
            name="Cart"
            options={{
              headerShown: true,
              title: '购物车',
            }}
            component={CartSreen}
          />
          <Stack.Screen
            name="Pay"
            options={{
              headerShown: true,
              title: '确定购买',
            }}
            component={PayScreen}
          />
          <Stack.Screen
            options={({ navigation }) => ({
              headerShown: true,
              title: '课程列表',
              headerRight: () => DetailsHeaderRight({ navigation }),
            })}
            name="CourseList"
            component={CourseListSreen}
          />
          <Stack.Screen
            options={({ navigation }) => ({
              headerShown: true,
              title: '视频播放',
              headerRight: () => DetailsHeaderRight({ navigation }),
            })}
            name="CourseVideoPlay"
            component={CourseVideoPlaySreen}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </ToastProvider>
  );
}

const styles = StyleSheet.create({
  shopLogo: {
    width: 20,
    height: 20,
  },
});
